<template>
	<view class="content_bg">
		<view class="top_tab">
			<ul>
				<li :class="isShow == 1?'active':''" @tap="tabShow(1)">
					<span>邀请好友</span>
				</li>
				<li :class="isShow == 2?'active':''" @tap="tabShow(2)">
					<span>我的推广</span>
				</li>
			</ul>
		</view>
		<view class="tab_share" v-if="isShow == 1">
			<view class="detail">
				<span>邀请好友使用快影APP</span>
				
					<img src="/static/share_pic.png" @tap="showModal" data-target="Modal">
				
				<view class="yq_code">
					邀请码：A123895
				</view>
			</view>
			<view class="share_state">
				<view class="state_title">
					推广须知
				</view>
				<view class="state_detail">
					<p>1.通过二维码每注册一人，您可获得200积分，注册人可获得100积分。</p>
					<p>2.积分可以享受会员权益，以及在商城兑换商品。</p>
					<p>3.如果你的朋友在身边，可以直接面对面扫码邀请哦！</p>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">分享至</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="share_path">
						<ul>
							<li>
								<view class="share_icon">
									<img src="/static/icon/share_wx.png" alt="">
								</view>
								<span>微信</span>
							</li>
							<li>
								<view class="share_icon">
									<img src="/static/icon/share_pyq.png" alt="">
								</view>						
								<span>朋友圈</span>
							</li>
							<li>
								<view class="share_icon">
									<img src="/static/icon/share_qq.png" alt="">
								</view>							
								<span>QQ</span>
							</li>
							<li>
								<view class="share_icon">
									<img src="/static/icon/share_wb.png" alt="">
								</view>							
								<span>微博</span>
							</li>
							<li>
								<view class="share_icon">
									<img src="/static/icon/share_ewm.png" alt="">
								</view>							
								<span>二维码</span>
							</li>
							<li>
								<view class="share_icon">
									<img src="/static/icon/share_herf.png" alt="">
								</view>
								<span>复制链接</span>
							</li>
						</ul>
					</view>
				</view>
			</view>
		</view>
		<view class="tab_mine" v-if="isShow == 2">
			<view class="share_info">
				<ul>
					<li>
						<text>累计推广人数</text>
						<font>2人</font>
					</li>
					<li>
						<text>累计获得积分</text>
						<font>400</font>
					</li>
				</ul>
			</view>
			<view class="share_list">
				<view class="list_title">
					<text>用户</text>
					<text>ID</text>
					<text>注册时间</text>
				</view>
				<ul>
					<li>
						<view class="user_photo">
							<img src="../../static/user_photo.jpeg" >
						</view>
						<view class="user_id">
							有点文艺的二笔青年
						</view>
						<view class="signin_tiem">
							2019-9-1
						</view>
					</li>
					<li>
						<view class="user_photo">
							<img src="../../static/user_photo.jpeg" >
						</view>
						<view class="user_id">
							有点文
						</view>
						<view class="signin_tiem">
							2019-09-10
						</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:1,
				modalName: null,
			}
		},
		methods: {
			tabShow(i){
				this.isShow = i;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style>
.content_bg{
	width: 100%;
	border-top: #F2F2F2 1rpx solid;
}

.top_tab{
	width: 100%;
	height: 108rpx;
}

.top_tab ul{
	display: flex;
}

.top_tab ul li{
	width: 50%;
	padding-top: 28rpx;
}

.top_tab ul li span{
	display: block;
	box-sizing: border-box;
	margin: 0 auto;
	width: 150rpx;
	font-size: 34rpx;
	color: #666666;
	height: 54rpx;
	line-height: 54rpx;
	text-align: center;
}

.top_tab ul .active span{
	border-bottom: #00A7FF 4rpx solid;
	color: #00A7FF;
}

.detail{
	width: 100%;
	height: 680rpx;
	background-image: url(/static/invite_bg.png);
	background-position: 50%;
	background-size: cover;
	padding-top: 45rpx;
}

.detail span{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 44rpx;
	color: #FFFFFF;
}

.detail navigator{
	width: 420rpx;
	height: 110rpx;
	margin: 0 auto;
}

.detail img{
	display: block;
	width: 420rpx;
	height: 110rpx;
	margin: 0 auto;
	margin-top: 250rpx;
}

.yq_code{
	width: 328rpx;
	height: 73rpx;
	line-height: 73rpx;
	border-radius: 37rpx;
	margin: 0 auto;
	text-align: center;
	border: #FFFFFF 1px solid;
	color: #ffffff;
	font-size: 30rpx;
	margin-top: 30rpx;
}

.share_state{
	width: 690rpx;
	margin: 0 auto;
	margin-top: 95rpx;
	padding-bottom: 60rpx;
}

.state_title{
	font-size: 30rpx;
	color: #333333;
	font-weight: 600;
}

.state_detail{
	margin-top: 30rpx;
}

.state_detail{
	font-size: 26rpx;
	line-height: 42rpx;
}

.cu-dialog{
	background-color: transparent;
}

.share_path{
	width: 100%;
	background-color: rgba(255,255,255,0.8)!important;
}

.share_path ul{
	display: flex;
	flex-wrap: wrap;
}

.share_path ul li{
	width: 33.33%;
	padding: 45rpx 0;
}

.share_icon{
	width: 96rpx;
	height: 96rpx;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding-top: 22rpx;
	margin-bottom: 22rpx;
}

.share_icon img{
	width: 65rpx;
	height: 52rpx;
}

.share_path ul li span{
	font-size: 28rpx;
	color: #333333;
}

.tab_mine{
	width: 100%;
}

.share_info{
	width: 100%;
	height: 180rpx;
	background-color: #69A8FD;
}

.share_info ul{
	display: flex;
	padding-top: 30rpx;
}

.share_info ul li{
	width: 50%;
	border-right: #FFFFFF 2rpx solid;
}

.share_info ul li text{
	display: block;
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	font-size: 34rpx;
}

.share_info ul li font{
	display: block;
	text-align: center;
	color: #FFFFFF;
	margin-top: 30rpx;
	font-size: 40rpx;
}

.share_list{
	width: 100%;
}

.list_title{
	width: 100%;
	height: 78rpx;
	background-color: #F2F2F2;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 30rpx;
}

.list_title text{
	display: block;
	height: 78rpx;
	line-height: 78rpx;
	color: #009AFF;
	font-size: 32rpx;
}

.list_title text:first-of-type{
	width: 70rpx;
}

.list_title text:last-of-type{
	width: 140rpx;
	text-align: right;
}

.share_list ul{
	width: 690rpx;
	margin: 0 auto;
	
}

.share_list ul li{
	width: 100%;
	height: 104rpx;
	border-bottom: #ECECEC 1px solid;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.share_list ul li .user_photo{
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	overflow: hidden;
}

.share_list ul li .user_photo img{
	display: block;
	width: 56rpx;
	height: 56rpx;
}

.user_id{
	color: #666666;
	font-size: 26rpx;
}

.signin_tiem{
	font-size: 26rpx;
	color: #666666;
	width: 140rpx;
	text-align: right;
}

</style>
